<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Scratch VM Benchmark</title>
    <link rel="stylesheet" href="./benchmark.css" type="text/css" media="screen">
</head>
<body>
  <h2>Scratch VM Benchmark</h2>
  <p class="description">
    Welcome to the scratch-vm benchmark. This tool helps you profile a scratch
    project. When you load the page, it:
    <ol class="description">
      <li>loads the default project and enables turbo mode
      <li>runs the project for 4 seconds to warm up
      <li>profiles for 6 seconds
      <li>stops and reports
    </ol>
  </p>
  <div class="run-form">
      <input type="text" value="119615668">
      <button class="run">run</button>
  </div>
  <p class="run-push">
    <i>Try a different project, like `130041250`</i>
  </p>

  <canvas id="scratch-stage"></canvas><br />

  <div class="loading">
    <label>Loading:</label>
    <span class="loading-complete">0</span> / <span class="loading-total">0</span>
  </div>
  <div class="profile-count-group">
    <div class="profile-count">
      <label>Percent of time worked:</label>
      <span class="profile-count-value profile-count-amount-recorded">...</span>
    </div>
    <div class="profile-count">
      <label>Steps looped:</label>
      <span class="profile-count-value profile-count-steps-looped">...</span>
    </div>
    <div class="profile-count">
      <label>Blocks executed:</label>
      <span class="profile-count-value profile-count-blocks-executed">...</span>
    </div>
    <a class="share"><div class="profile-count">
      <label>Share this report</label>
    </div></a>
    <a class="share" target="_parent">
        <div class="profile-count">
            <label>Run the full suite</label>
        </div>
    </a>
  </div>

  <div class="profile-tables">
  <table class="profile-count-frame-table" cellspacing="0">
    <thead>
    <tr class="profile-count-frame-head"><th>Frame</th><th>Self Time</th><th>Total Time</th><th>Executions</th></tr>
    </thead>
    <tbody>
    <tr class="profiler-count-running"><td colspan="4"></td></tr>
    </tbody>
  </table>

  <table class="profile-count-opcode-table" cellspacing="0">
    <thead>
    <tr class="profile-count-opcode-head">
      <th>opcode</th><th>Self Time</th><th>Total Time</th><th>Executions</th>
    </tr>
    </thead>
    <tbody>
    <tr class="profiler-count-running"><td colspan="4"></td></tr>
    </tbody>
  </table>
  </div>

  <div id="blocks"></div>

  <!-- FPS counter, Blocks, Renderer -->
  <script src="./vendor.js"></script>
  <!-- Storage module -->
  <script src="./scratch-storage.js"></script>
  <!-- Stage rendering -->
  <script src="./scratch-render.js"></script>
  <!-- VM -->
  <script src="./scratch-vm.js"></script>
  <!-- Playground -->
  <script src="./benchmark.js"></script>
</body>
</html>
